<template>
  <div>
    <el-card class="box-card yibiaopan">
      <div class="clearfix">
        <span class="title-bold">仪表盘</span>
        <span> - 设备概览和传感数据可视化。</span>
      </div>
    </el-card>
    <div class="gailan">
      <div class="gailan-L">
        <el-card class="box-card shebei">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">设备概览 </span>
            <i class="iconfont icon-askoutline" style="color: #ccc"></i>
            <el-button style="float: right; padding: 3px 0" type="text"
              >绑定设备</el-button
            >
          </div>
          <div class="shebeinei">
            <img src="../../assets/img/gateway.png" alt="" class="tu1" />
            <div class="she1">
              <p style="font-size: 30px">{{ deviceObj.LoRaWAN.total }}</p>
              <p>LoRaWAN</p>
              <p>网关</p>
            </div>
            <div class="she1">
              <p style="font-size: 30px">{{ deviceObj.LoRaPP.total }}</p>
              <p>LoRaPP</p>
              <p>网关</p>
            </div>
            <div class="she1">
              <p style="font-size: 30px">{{ deviceObj.group }}</p>
              <p>群组</p>
            </div>
            <div class="she2"></div>
            <i
              class="iconfont icon-yalichuanganqi"
              style="color: #91a8bf; font-size: 60px"
            ></i>
            <div>
              <p style="font-size: 30px">{{ deviceObj.sensor.total }}</p>
              <p>传感器节点</p>
            </div>
          </div>
        </el-card>
        <el-card class="box-card jiankong">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">监控 </span>
            <i class="iconfont icon-askoutline" style="color: #ccc"></i>
          </div>
          <p>
            <span>网关离线</span
            ><span class="shuju1" style="color: #75a26e">{{
              deviceObj.LoRaWAN.total
            }}</span>
          </p>
          <p>
            <span>节点离线</span
            ><span class="shuju1" style="color: #75a26e">{{
              deviceObj.sensor.offline
            }}</span>
          </p>
          <p>
            <span>传感器低电量</span
            ><span class="shuju2" style="color: #ed5253">{{
              deviceObj.sensor.lowBattery
            }}</span>
          </p>
        </el-card>
      </div>
      <div class="gailan-R">
        <el-card class="box-card gonggao">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">公告 </span>
            <i class="iconfont icon-askoutline" style="color: #ccc"></i>
          </div>
          <p>
            <i
              class="iconfont icon-info"
              style="color: #63d87c; font-weight: bold"
            ></i
            >senseCAP V302020-02-13 14:28:07
          </p>
          <p>
            <i
              class="iconfont icon-info"
              style="color: #63d87c; font-weight: bold"
            ></i
            >senseCAP V302020-02-13 14:28:07
          </p>
        </el-card>
      </div>
    </div>
    <div class="tubiao">
      <el-card class="box-card kongqishidu">
        <div slot="header" class="clearfix">
          <span>空气湿度</span>
        </div>
        <div ref="chart1" class="chart"></div>
      </el-card>
      <el-card class="box-card guangzhao">
        <div slot="header" class="clearfix">
          <span>光照</span>
        </div>
        <div ref="chart2" class="chart"></div>
      </el-card>
      <el-card class="box-card qiya">
        <div slot="header" class="clearfix">
          <span>气压</span>
        </div>
        <div ref="chart3" class="chart"></div>
      </el-card>
      <el-card class="box-card turangshidu">
        <div slot="header" class="clearfix">
          <span>土壤湿度</span>
        </div>
        <div ref="chart4" class="chart"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { $deviceCount, $sensorCount } from "@/api/index.js";
export default {
  name: "dashboardView",
  data() {
    return {
      deviceObj: {
        LoRaWAN: "",
        LoRaPP: "",
        group: "",
        sensor: "",
      },
    };
  },
  mounted() {
    $deviceCount().then((res) => {
      console.log(res);
      this.deviceObj = res.data.data;
    });
    $sensorCount().then((res) => {
      console.log(res);
      this.draw(res.data.data);
    });
  },
  methods: {
    draw(data) {
      let chart1 = this.$echarts.init(this.$refs.chart1);
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.air,
            type: "line",
            smooth: true,
          },
        ],
      };
      let chart2 = this.$echarts.init(this.$refs.chart2);
      console.log(chart2);
      var option1 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.beam,
            type: "bar",
          },
        ],
      };
      let chart3 = this.$echarts.init(this.$refs.chart3);
      console.log(chart3);
      var option2 = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [20, 150],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: data.pressure,
          },
        ],
      };
      let chart4 = this.$echarts.init(this.$refs.chart4);
      var option3 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.soil,
            type: "line",
            smooth: true,
          },
        ],
      };
      chart1.setOption(option);
      chart2.setOption(option1);
      chart3.setOption(option2);
      chart4.setOption(option3);
    },
  },
};
</script>

<style lang="scss" scoped>
.yibiaopan {
  margin-right: 10px;
  margin-top: 10px;
  margin-left: 10px;
}
.gailan-L {
  display: flex;
  width: 100%;
}
.shebei {
  width: 70%;
  height: 250px;
  margin-left: 10px;
}
.jiankong {
  width: 30%;
  margin-left: 10px;
}
.jiankong p {
  height: 25.17px;
  margin-bottom: 20px;
  font-weight: bold;
}
.title-bold {
  font-size: 20px;
  font-weight: bold;
}
.gailan {
  display: flex;
  margin-top: 10px;
}
.gailan-R {
  width: 30%;
  height: 200px;
  margin-left: 10px;
  margin-right: 10px;
}
.gonggao {
  height: 250px;
}
.gonggao p {
  margin-bottom: 20px;
}
.shuju1 {
  display: inline-block;
  width: 50px;
  height: 25px;
  border-radius: 30px;
  margin-left: 172px;
  background: #ddf0e0;
  vertical-align: middle;
  text-align: center;
  line-height: 25px;
}
.shuju2 {
  display: inline-block;
  width: 50px;
  height: 25px;
  border-radius: 30px;
  margin-left: 140px;
  background: #fbdadb;
  vertical-align: middle;
  text-align: center;
  line-height: 25px;
}
.tu1 {
  height: 100px;
  margin-top: 25px;
}
.shebeinei {
  display: flex;
}
.shebeinei div {
  margin-left: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  font-weight: bold;
}
.icon-yalichuanganqi {
  transform: rotate(180deg);
  margin-left: 30px;
  margin-bottom: 20px;
}
.she1::before {
  content: "";
  width: 1px;
  height: 55px;
  background: #ccc;
  margin-left: 10px;
  position: absolute;
  top: 42px;
  left: -58px;
}
.she2::before {
  content: "";
  width: 1px;
  height: 109px;
  background: #ccc;
  margin-left: 10px;
  position: absolute;
  top: 16px;
  left: -45px;
}
.kongqishidu,
.guangzhao,
.qiya,
.turangshidu {
  width: 48.72%;
  // height: 400px;
  margin-right: 10px;
  margin-top: 10px;
  margin-left: 10px;
}
.tubiao {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.chart {
  height: 400px;
}
</style>